<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  *{
      margin:0;
      padding: 0;
    }
    canvas{
      display: block;
      margin:0 auto;
      border:1px red solid;
    }
	</style>
</head>
<body>
    
	<canvas id="canvas" width="800" height="600">
     
	</canvas>
	
	
</body>
<script type="text/javascript">
  var canvas=document.querySelector("#canvas");
  var ctx=canvas.getContext("2d");

  ctx.font="italic bold 50px sans-serif";
 

  ctx.textAlign="center";
  ctx.textBaseline="middle"
  ctx.fillStyle="red";
  // ctx.fillText("高考啦感觉",100,100)
  
  // var length=ctx.measureText("高考啦感觉").width
  // console.log(length);
  // ctx.strokeText("高考啦感觉",400,100)
    
  ctx.strokeText("估计快了人家给",400,300)
 
  // ctx.strokeText("矿工们的你说过",400,500)
  
  ctx.beginPath();
  ctx.moveTo(400,0);
  ctx.lineTo(400,600);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0,300);
  ctx.lineTo(800,300);
  ctx.stroke();
  ctx.closePath();
</script>
</html>